<template>
  <div class="contiant">
    <div class="con_left">
      <div v-for="item in listType" :key="item.templateId" @click="getAlls(item.templateId)" class="list"
        :class="item.templateId == form.templateId ? 'active' : ''">
        <div style="
            overflow: hidden;
            width: 15px;
            height: 15px;
            display: inline-block;
          ">
          <img src="../../assets/12.png" />
        </div>
        {{ item.alias }}
      </div>
    </div>
    <div class="con_right">
      <!-- 选择日期 -->
      <div class="item">
        <div class="itemTitle">选择日期</div>
        <div class="checks timeBg">
          <el-date-picker v-model="form.date" :type="dateType" placeholder="请选择" size="default"
            :value-format="getdateType" />  
        </div>

      </div>
      <!-- 月报指标 -->
      <div class="item-week itemHight-week"  v-if="form.templateId=='1'">
        <div class="itemTitle">指标
          <el-checkbox v-model="checkAll"  @change="allCheack1">全选</el-checkbox>
        </div>
        <div class="checks-week">
          <div class="check-box">
            <div v-masonry fit-width="true" transition-duration="0.3s" item-selector=".card" origin-left="false" class="pets">
            <div v-masonry-tile v-for="pet in indicators" :key="pet.id" class="card">
            <div class="checkNum">
              <el-tooltip
                          class="box-item"
                          effect="dark"
                          :content="pet.name"
                          placement="top-start"
                          :auto-close="500"
                          :enterable="false"
                        >
              <el-checkbox v-model="pet.checkFlag"  @change="numChange(pet.checkFlag,pet)">{{
                pet.name
              }}</el-checkbox>
              </el-tooltip>
              <div v-for="item_1 in pet.child" :key="item_1.id" style="padding-left: 10px;">
                <el-tooltip
                          class="box-item"
                          effect="dark"
                          :content="item_1.name"
                          placement="top-start"
                          :auto-close="500"
                          :enterable="false"
                        >
                <el-checkbox v-model="item_1.checkFlag"  @change="numChange(item_1.checkFlag,item_1)">{{
                  item_1.name
                }}</el-checkbox>
                 </el-tooltip>
                <div v-for="item_2 in item_1.child" :key="item_2.id" style="padding-left: 20px;">
                  <el-tooltip
                          class="box-item"
                          effect="dark"
                          :content="item_2.name"
                          placement="top-start"
                          :auto-close="500"
                          :enterable="false"
                        >
                  <el-checkbox v-model="item_2.checkFlag" @change="numChange(item_2.checkFlag,item_2)">{{
                    item_2.name }}</el-checkbox>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
          </div>
        </div>
      </div>
      <!-- 季报指标 -->
      <div class="item-month"  v-if="form.templateId=='2'">
        <div class="itemTitle">指标
          <el-checkbox v-model="checkAll"  @change="allCheack1">全选</el-checkbox>
        </div>
        <div class="checks">
          <div class="check-box">
            <div v-masonry fit-width="true" transition-duration="0.3s" item-selector=".card" origin-left="false" class="pets">
            <div v-masonry-tile v-for="pet in indicators" :key="pet.id" class="card">
            <div class="checkNum">
              <el-tooltip
                          class="box-item"
                          effect="dark"
                          :content="pet.name"
                          placement="top-start"
                          :auto-close="500"
                          :enterable="false"
                        >
              <el-checkbox v-model="pet.checkFlag"  @change="numChange(pet.checkFlag,pet)">{{
                pet.name
              }}</el-checkbox>
              </el-tooltip>
              <div v-for="item_1 in pet.child" :key="item_1.id" style="padding-left: 10px;">
                <el-tooltip
                          class="box-item"
                          effect="dark"
                          :content="item_1.name"
                          placement="top-start"
                          :auto-close="500"
                          :enterable="false"
                        >
                <el-checkbox v-model="item_1.checkFlag"  @change="numChange(item_1.checkFlag,item_1)">{{
                  item_1.name
                }}</el-checkbox>
                </el-tooltip>
                <div v-for="item_2 in item_1.child" :key="item_2.id" style="padding-left: 20px;">
                  <el-tooltip
                          class="box-item"
                          effect="dark"
                          :content="item_2.name"
                          placement="top-start"
                          :auto-close="500"
                          :enterable="false"
                        >
                  <el-checkbox v-model="item_2.checkFlag" @change="numChange(item_2.checkFlag,item_2)">{{
                    item_2.name }}</el-checkbox>
                    </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
          </div>
        </div>
      </div>
      <!-- 年报指标 -->
      <div class="item itemHight" id="yearBox"  v-if="form.templateId=='3'">
        <div class="itemTitle">指标
          <el-checkbox v-model="checkAll"  @change="allCheack1">全选</el-checkbox>
        </div>
        <div class="checks"  id="yearitem"  >
          <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange">
            <el-tab-pane  v-for="item in activeList" :key="item.id" :label="item.name" :name="item.id" />
          </el-tabs>
          <div class="check-box" v-if="activeName==0">
            <div v-masonry fit-width="true" transition-duration="0" item-selector=".card" origin-left="false" class="pets">
            <div v-masonry-tile v-for="pet in indicators" :key="pet.id" class="card">
            <div class="checkNum">
              <el-tooltip
                          class="box-item"
                          effect="dark"
                          :content="pet.name"
                          placement="top-start"
                          :auto-close="500"
                          :enterable="false"
                        >
              <el-checkbox v-model="pet.checkFlag"  @change="numChange(pet.checkFlag,pet)">{{
                pet.name
              }}</el-checkbox>
               </el-tooltip>
              <div v-for="item_1 in pet.child" :key="item_1.id" style="padding-left: 10px;">
                <el-tooltip
                          class="box-item"
                          effect="dark"
                          :content="item_1.name"
                          placement="top-start"
                          :auto-close="500"
                          :enterable="false"
                        >
                <el-checkbox v-model="item_1.checkFlag"  @change="numChange(item_1.checkFlag,item_1)">{{
                  item_1.name
                }}</el-checkbox>
                 </el-tooltip>
                <div v-for="item_2 in item_1.child" :key="item_2.id" style="padding-left: 20px;">
                  <el-tooltip
                          class="box-item"
                          effect="dark"
                          :content="item_2.name"
                          placement="top-start"
                          :auto-close="500"
                          :enterable="false"
                        >
                  <el-checkbox v-model="item_2.checkFlag" @change="numChange(item_2.checkFlag,item_2)">{{
                    item_2.name }}</el-checkbox>
                     </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
          </div>
          <div class="check-box" v-if="activeName==1">
            <div v-masonry fit-width="true" transition-duration="0" item-selector=".card" origin-left="false" class="pets">
            <div v-masonry-tile v-for="pet in indicators" :key="pet.id" class="card">
            <div class="checkNum">
              <el-checkbox v-model="pet.checkFlag"  @change="numChange(pet.checkFlag,pet)">{{
                pet.name
              }}</el-checkbox>
              <div v-for="item_1 in pet.child" :key="item_1.id" style="padding-left: 10px;">
                <el-checkbox v-model="item_1.checkFlag"  @change="numChange(item_1.checkFlag,item_1)">{{
                  item_1.name
                }}</el-checkbox>
                <div v-for="item_2 in item_1.child" :key="item_2.id" style="padding-left: 20px;">
                  <el-checkbox v-model="item_2.checkFlag" @change="numChange(item_2.checkFlag,item_2)">{{
                    item_2.name }}</el-checkbox>
                </div>
              </div>
            </div>
          </div>
        </div>
          </div>
          <div class="check-box" v-if="activeName==2">
            <div v-masonry fit-width="true" transition-duration="0" item-selector=".card" origin-left="false" class="pets">
            <div v-masonry-tile v-for="pet in indicators" :key="pet.id" class="card">
            <div class="checkNum">
              <el-checkbox v-model="pet.checkFlag"  @change="numChange(pet.checkFlag,pet)">{{
                pet.name
              }}</el-checkbox>
              <div v-for="item_1 in pet.child" :key="item_1.id" style="padding-left: 10px;">
                <el-checkbox v-model="item_1.checkFlag"  @change="numChange(item_1.checkFlag,item_1)">{{
                  item_1.name
                }}</el-checkbox>
                <div v-for="item_2 in item_1.child" :key="item_2.id" style="padding-left: 20px;">
                  <el-checkbox v-model="item_2.checkFlag" @change="numChange(item_2.checkFlag,item_2)">{{
                    item_2.name }}</el-checkbox>
                </div>
              </div>
            </div>
          </div>
        </div>
          </div>
        </div>
      </div>
      <div class="items" v-if="form.templateId!='1'&&form.templateId!='2'&&form.templateId!='3'">
              <div class="itemTitle">指标<el-checkbox v-model="checkAll" @change="allCheack2" label="全选" /></div>
                <div class="checks myChecks">
                    <el-checkbox-group v-model="form.indicatorsList" :min="1">
                        <el-checkbox v-for="item in  getParamsData.indicators" :key="item.id" :label="item.id"
                          class="checkItem">
                          {{item.name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
      <!-- 地区 -->
      <div class="item itemHights">
        <div class="itemTitle">地区</div>
        <div class="checks">
          <el-checkbox v-model="checkAll1" value="true" label="全选" class="checkAll"/>
          <el-checkbox-group v-model="getAdress">
            <el-checkbox v-for="(item, index) in getParamsData.cityList" :key="index" :label="item.username"
              @change="addressChange(item.username, index)" />
          </el-checkbox-group>
        </div>
      </div>
      <!-- 经开区 -->
      <div class="item">
        <div class="itemTitle" id="boxHeight">
          经开区
        </div>
        <div class="checks" id="sqHeight" style="min-height: 80px;padding-top: 10px;">
          <el-checkbox-group v-model="form.developAreaList">
            <el-checkbox v-for="item in developShow" :key="item" :label="item" @change="developChange" />
          </el-checkbox-group>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="itembth">
        <el-button type="danger" @click="makeTable">生成数据</el-button>
        <el-button type="danger" @click="flilTale">导出数据</el-button>
      </div>
      <el-divider />
      <!-- 列表数据 -->
      <div class="tables">
        <el-table :header-cell-style="{
          background: 'rgba(24, 132, 252, 0.1)',
          color: 'black',
          'text-align': 'center',
        }" :data="tableData" style="width: 100%" height="600"  v-loading="loading">
          <el-table-column label="指标名称"  width="220">
            <el-table-column prop="developArea" label="经开区" align="center" sortable  width="220"/>
          </el-table-column>
          <el-table-column v-for="(item, index) in chooseIndicators" :key="index" :label="item.indicators">
            <el-table-column label="绝对值" align="center" :prop="`value${index + 1}`" sortable width="150" />
            <el-table-column label="同比" align="center" :prop="`ratio${index + 1}`" sortable />
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import { getTemplateType, dataDevelopList, getdataTable ,analyseExport} from "@/util/api";
import { ElMessage } from "element-plus";
import elementResize from "element-resize-detector";
import { first ,second,thrid,month,quarter} from './indicators'
//定义常量和变量
const activeName: any = ref(0);//tabs名字
const weeks :any = ref("第二季度")
const activeList: any = ref([
  {
    name: '产出与投入',
    id: 0
  },
  {
    name: '投资与企业',
    id: 1
  },
  {
    name: '社会与环境',
    id: 2
  },
])
const listType: any = ref([]); //报表类型数据
const getParamsData: any = ref({}); //指标数据和地区数据
const tableData: any = ref([]); //报表数据
const indicators: any = ref([])//指标
const checkAll: any = ref(false); //年报全选指标
const checkAll1: any = ref(true); //是否全选经开区
const dateType: any = ref("month"); //下拉日期类型
const getdateType: any = ref("YYYY-MM"); //日期格式
const getAdress: any = ref([]); //已选择的地区
//已选择的经开区为 form.value.developAreaList
const developShow: any = ref([]); //展示的经开区数据
const allCitylist: any = ref([]); //所有地区
const allDevelopList: any = ref([]); //所有的经开区
const chooseIndicators: any = ref([]); //选中的指标名称
const loading: any = ref(false);
// table表参数
const form = ref({
  templateId: "", //
  date: "", //结束时间
  indicatorsList: [], //指标
  developAreaList: [], //经开区
});

//生命周期执行函数

//1获取左边报表类型接口
const getlistType = async () => {
  let res: any = await getTemplateType();
  console.log(res)
  res.data.forEach((item: any) => {
    item.typeList.forEach((list: any) => {
      listType.value.push(list);
    });
  });
  //获取默认显示的第一个类型的templateId
  let nowId = listType.value[0].templateId;
  //默认选择第一个报表类型
  form.value.templateId = nowId;
  //默认选择第一个报表类型
  form.value.templateId = nowId;
  getParams();
};
//2获取右边指标和地区的
const getParams = async () => {
  let res: any = await dataDevelopList(form.value.templateId);
  // console.log(form.value.templateId)
  //赋值指标数据和地区数据
  getParamsData.value = res.data;
  if(form.value.templateId=='3'){
    indicators.value = first
  }else if(form.value.templateId=='1'){
    indicators.value= month
  }else if(form.value.templateId=='2'){
    indicators.value=quarter
  }
  clearAllindicators(first)
  clearAllindicators(second)
  clearAllindicators(thrid)
  clearAllindicators(month)
  clearAllindicators(quarter)
  checkAll.value=false
  // 切换类型清空参数
  form.value = {
    templateId: form.value.templateId, //
    date: "", //结束时间
    indicatorsList: [], //指标
    developAreaList: [], //经开区
  };
  tableData.value = [];
  allCitylist.value = [];
  getAdress.value = [];
  developShow.value = [];
  //进入默认勾选所有经开区
  getParamsData.value.cityList.forEach((item: any) => {
    getAdress.value.push(item.username);
    allCitylist.value.push(item.username);
    if (item.developList == null) {
      item.developList = [{ username: item.username }];
    }
    item.developList.forEach((name: any) => {
      developShow.value.push(name.username);
    });
  });

  //参数添加所有经开区
  allDevelopList.value = JSON.parse(JSON.stringify(developShow.value));
  form.value.developAreaList = JSON.parse(JSON.stringify(developShow.value));
};
//    事件
//    报表类型点击
const getAlls = (item: any) => {
  //判断是否有数据汇总
  if (['1','2','3','6','7'].includes(item)) {
    form.value.templateId = item;
    getParams().then(() => {
      //清除时间
      form.value.date = "";
      //切换日期选择类型
      if (['1','2','6','7'].includes(item)) {
        //月报
        dateType.value = "month";
        getdateType.value = "YYYY-MM";
      } else {
        //年报
        dateType.value = "year";
        getdateType.value = "YYYY";
      }
    });
  } else {
    ElMessage("暂无数据汇总");
  }
};
//指标选择
const numChange = (id: any,arr:any) => {
  console.log(id,arr.id)
  if(!id){
     form.value.indicatorsList.splice(form.value.indicatorsList.indexOf(arr.id),1)
  }else{
    form.value.indicatorsList.push(arr.id)
  }
  console.log(form.value.indicatorsList)
}
//年报tabs切换
const tabChange=()=>{
     if(activeName.value==0){
          indicators.value=first
     }else if(activeName.value==1){
          indicators.value=second
     }else{
          indicators.value=thrid
     }
}
//月季年指标全部选择
const allCheack1 = () => {
  form.value.indicatorsList = [];
  if (checkAll.value){
    //全选
    // 年报需要三种类型全部选中
    if(form.value.templateId=='3'){
      getAllindicators(indicators.value)
      console.log(activeName.value)
      if(activeName.value==0){
      getAllindicators(second)
      getAllindicators(thrid)
      }else if(activeName.value==1){
      getAllindicators(first)
      getAllindicators(thrid)
      }else if(activeName.value==2){
      getAllindicators(first)
      getAllindicators(second)
      } 
    }else{
      getAllindicators(indicators.value)
    }
  } else {
    //清空只留一个
    form.value.indicatorsList = [];
    clearAllindicators(indicators.value)
    if(activeName.value==0){
      clearAllindicators(second)
      clearAllindicators(thrid)
      }else if(activeName.value==1){
        clearAllindicators(first)
        clearAllindicators(thrid)
      }else if(activeName.value==2){
        clearAllindicators(first)
        clearAllindicators(second)
      } 
  }
};
//其他指标选择
const allCheack2=()=>{
  if(checkAll.value){
    form.value.indicatorsList = [];
    getParamsData.value.indicators.forEach((v:any)=>form.value.indicatorsList.push(v.id))
  }else{
    form.value.indicatorsList = [];
  }
}
// 指标全选时
const getAllindicators=(arr:any)=>{
         arr.forEach((v:any)=>{
           v.checkFlag=true
           form.value.indicatorsList.push(v.id)
           if(v.child)getAllindicators(v.child)
         })
}
// 指标取消全选
const clearAllindicators=(arr:any)=>{
         arr.forEach((v:any)=>{
           v.checkFlag=false 
           if(v.child)clearAllindicators(v.child)
         })
}
//地区单选
const addressChange = (name: string, index: number) => {
  getParamsData.value.cityList[index].developList.forEach((item: any) => {
    if (getAdress.value.indexOf(name) < 0) {
      developShow.value.splice(developShow.value.indexOf(item.username), 1);
      form.value.developAreaList.splice(
        form.value.developAreaList.indexOf(item.username),
        1
      );
    } else if (getAdress.value.indexOf(name) >= 0) {
      developShow.value.push(item.username);
      form.value.developAreaList.push(item.username);
    }
  });
  if (form.value.developAreaList.length == allDevelopList.value.length) {
    checkAll1.value = true;
  }
};
//经开区单选
const developChange = () => {
  if (form.value.developAreaList.length == allDevelopList.value.length) {
    checkAll1.value = true;
  }
};
//点击生成数据
const makeTable = async () => {
  //判断是否选择日期
  if (form.value.date == "" || form.value.date == null)
    return ElMessage.error("请选择日期");
  if (form.value.indicatorsList.length == 0)
    return ElMessage.error("请选择指标");
  if (form.value.developAreaList.length == 0)
    return ElMessage.error("请选择经开区");
  loading.value = true;
  const res: any = await getdataTable(form.value);
  // console.log(res)
  loading.value = false;
  if (res.data.length == 0 && res.code == "200") {
    tableData.value = [];
    ElMessage.warning("暂无任何数据");
  } else {
    chooseIndicators.value = [];
    res.data[0].dataList.forEach((i: any) => {
      chooseIndicators.value.push(i);
    });
    tableData.value = [];
    res.data.forEach((item: any) => {
      let dataTables = {};
      dataTables["developArea"] = item.developArea;
      item.dataList.map((list: any) => Object.assign(dataTables, list));
      tableData.value.push(dataTables);
    });
  // console.log(tableData.value)
  }
};
//导出表格
const flilTale = async ()=>{
    if (form.value.date == "" || form.value.date == null)
    return ElMessage.error("请选择日期");
  if (form.value.indicatorsList.length == 0)
    return ElMessage.error("请选择指标");
  if (form.value.developAreaList.length == 0)
    return ElMessage.error("请选择经开区");
    loading.value=true
    let data = {
      templateId:form.value.templateId,
           date:form.value.date,
    developList:form.value.developAreaList
    }
    const res = await  analyseExport(data)
    let fileName = "数据汇总.xlsx"
    handleFileError(res,fileName)
}
const handleFileError = (res: any, fileName: any) => {
    var downloadUrl = window.URL.createObjectURL(new Blob([res]));
    var a = document.createElement('a');
    a.style.display = 'none';
    a.href = downloadUrl;
    a.download = fileName;
    var event = new MouseEvent('click');
    a.dispatchEvent(event);
    loading.value=false
};
const setHeight = async()=>{
  var erd = elementResize();
  await erd.listenTo(document.getElementById('sqHeight'),(element:any)=>{
      var height=element.offsetHeight;
      let boxs = document.getElementById('boxHeight')
      // console.log(height);
      boxs.style.height=height+'px'
      boxs.style.lineHeight=height+'px'
    })
}
//生命周期
onMounted(() => {
  getlistType();
  setHeight();
});

//监听是否全选所有地区
watch(
  () => checkAll1.value, //监听
  (newValue) => {
    if (newValue) {
      //取消全选
      form.value.developAreaList = JSON.parse(
        JSON.stringify(allDevelopList.value)
      );
      developShow.value = JSON.parse(JSON.stringify(allDevelopList.value));
      getAdress.value = JSON.parse(JSON.stringify(allCitylist.value));
    } else {
      form.value.developAreaList = [];
      developShow.value = [];
      getAdress.value = [];
    }

    // if(newValue[1])
  }
);
</script>
<style scoped>
.contiant {
  width: 100%;
  height: calc(100vh - 67px);
  display: flex;
}

.con_left {
  width: 200px;
  height: 100%;
  vertical-align: top;
  color: #858585;
  box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.06);
  padding-top: 5px;
  box-sizing: border-box;
}

.con_right {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding: 30px 10px 0 10px;
  box-sizing: border-box;
  background-color: white;
}

.list {
  width: 100%;
  padding: 5px;
  font-size: 14px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 10px 0;
}

.item {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  margin-bottom: 6px;
  align-items: center;
  height: auto;
}
.items{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  margin-bottom: 6px;
  align-items: center;
  height: auto;
  justify-content: space-between;
}
.items .itemTitle{
  width: 180px;
  height: 200px;
  line-height: 200px;
  text-indent: 20px;
  text-align: left;
  background-color: #eb4c40;
  border-radius: 3px;
  color: #ffffff;
  font-size: 18px;
  margin-right: 5px;
  font-weight: 400;
}
.checks {
  box-sizing: border-box;
  flex: 1;
  background: #f5f5f5;
  padding-left: 10px;
}
.items .checks{
   flex:1;
   height: 200px;
   overflow-y: scroll;
}
.item .itemTitle {
  width: 180px;
  text-align: left;
  height: 100%;
  text-indent: 20px;
  background-color: #eb4c40;
  border-radius: 3px;
  color: #ffffff;
  font-size: 18px;
  margin-right: 5px;
  font-weight: 400;
}

.itemHight {
  height: 340px;
  padding-top: 60px;
  position: relative;
  margin-bottom: 20px;
}

.itemHight .demo-tabs {
  position: absolute;
  top: -40px;
}

.itemHight .check-box {
  width: 100%;
  height: 100%;
  padding: 10px 0;
  box-sizing: border-box;
}
.card{
  width: 20%;
}
.check-box .checkNum {
  width: 80%;
  overflow: hidden;
  white-space: nowrap; /* 防止文字换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.itemHight .checks {
  height: 104%;
  position: relative;
}

.demo-tabs {
  position: absolute;
}

.itemHights {
  height: 100px;
  overflow: hidden;
}



.itemHight .itemTitle {
  line-height: 300px;
}

.itemHights .itemTitle {
  line-height: 100px;
}

.itemHights .checks {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  padding-right: 40px;
  padding-top: 10px;
  box-sizing: border-box;
}



.checkItem {
  width: 30%;
  height: 100%;
  margin-top: 10px;
}

.timeBg {
  background-color: white;
  padding-left: 0;
  position: relative;
}
.weekDate{
  position: absolute;
  top: 0;
}
.itembth {
  text-align: center;
  margin: 20px;
}

.active {
  background-color: rgba(235, 76, 64, 0.5);
  color: white;
}

::v-deep(.el-checkbox) {
  align-items: self-start !important;
}
.item-week{
  display: flex;
  margin-bottom: 10px;
}
.item-month .checks{
  padding: 10px;
}
.item-month{
  display: flex;
  margin-bottom: 10px;
}
.item-month .itemTitle{
  width: 180px;
  text-align: left;
  height: 160px;
  text-indent: 20px;
  background-color: #eb4c40;
  border-radius: 3px;
  color: #ffffff;
  font-size: 18px;
  margin-right: 5px;
  font-weight: 400;
  line-height: 160px;
}
.item-week .itemTitle{
  min-width: 180px;
  text-align: left;
  height: 125px;
  text-indent: 20px;
  background-color: #eb4c40;
  border-radius: 3px;
  color: #ffffff;
  font-size: 18px;
  margin-right: 5px;
  font-weight: 400;
  line-height: 125px;
}
.checks-week{
  flex: 1;
  box-sizing: border-box;
  background: #f5f5f5;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.tables{
  max-width:1500px;
  margin: 0 auto;
  margin-bottom: 60px;
}
::v-deep(.el-checkbox__input.is-checked+.el-checkbox__label){
  color: var(--el-checkbox-text-color)!important;
}
.checkAll{
  margin-right: 30px;
}
.box-item{
  z-index: 9999;
}
</style>